<template>
	<view>
		<!-- 模态框 -->
		<view @click="Modal" :class="{ mask: model }"></view>
		<!-- 弹窗主体 -->
		<view :style="{ height: barHidth + 'rpx'}" class="active" :class="{ add: model }">
			<view class="title">{{ title }} <!-- <text @tap="close" class="cuIcon-close text-red"></text> --></view>
			<view class="cont" :style="{ height: barHidth - 80 + 'rpx',paddingBottom:props.source!='addYd'?(isPhonex ? '190rpx !important' : '130rpx !important'):'' }">
				<empty positions="absolute" :empty="dataList&&dataList.length<=0" :zIndexs="101"
					:imgUrl="env.FileUrl+'food/empty/images/empty_ico06.png'" content="暂无可预定时间" :imgMargin="isPhonex ? '-152rpx !important' : '-180rpx !important'"></empty>
				<!-- 天 -->
				<scroll-view class="day" :scroll-y="true">
					
						
						<block  v-for="(item, index) in dataList" :key="index">
							<view v-if="type!='time'||(type=='time'&&index === isIndex)" :class="index === isIndex ? 'active_copy' : ''" @click="dataCallback(index, item)">
								{{ item.timezh }}
							</view>
						</block>
						
					
					
				</scroll-view>

				<!-- 时 -->
				<scroll-view class="content" :scroll-y="true" :scroll-top="scrollTop">
					<empty positions="absolute" :empty="dataList[isIndex]&&dataList[isIndex].timelist.length<=0" :zIndexs="100"
						:imgUrl="env.FileUrl+'food/empty/images/empty_ico06.png'" content="暂无可选配送时间"></empty>
					<view v-if="dataList[isIndex]&&dataList[isIndex].timelist" class="appoint" :class="index === Indexes ? 'longActive' : ''"
						@click="timeCallback(index, item)" v-for="(item, index) in dataList[isIndex].timelist" :key="index">

						<view class="content-ui">
							<text v-if="item.name" class="erk-text" :class="index === Indexes ? 'longActive' : ''">{{ item.name}}</text>
							<text class="erk-text" :class="index === Indexes ? 'longActive' : ''">{{ item.timestr}}</text>
							<text class="erk-textTime merrig" :class="index === Indexes ? 'longActive' : ''">{{ item.deliveryfee }}</text>
						</view>
						<view :class="index === Indexes ? 'longActive' : ''" v-if="item.save" class="save">
							{{ item.save }}
						</view>
						<text class="posi-check" :class="index === Indexes ? 'fcon-xuanzhong' : ''"></text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, nextTick } from 'vue';
	import { getDateList,getCheckDateList,getMealDateList } from '@/api/vmeitime-http/index.js';
	import mApi from "@/utils/mapi";
	import { useShopStore } from '@/stores/shopStore';
	import { useCartStore } from '@/stores/cartStore';
	import {onLoad} from '@dcloudio/uni-app';
	import { getSystemPhoneX } from '@/utils/helper';
	import { env } from '@/api/env.js'
	const shopStore = useShopStore();
	const cartStore = useCartStore();
	const scrollTop = ref(0)
	const isIndex = ref(0)
	const Indexes = ref(0)
	const Days = ref<any>([])
	const model = ref(false)
	const dataList = ref<any>([])
	const isPhonex = ref<any>(false)
	// dataList: [{
	// 	timezh: "",
	// 	timeformatter: "",
	// 	id: 0,
	// 	timelist: []
	// }]


	// import { onLoad } from '@dcloudio/uni-app';
	const props = defineProps({
		isShow: {
			type: Boolean,
			default: false,
		},
		isFrome:{
			type: String,
			default: ""
		},
		//弹窗组件标题
		title: {
			type: String,
			default: "请传入title",
		},
		type:{
			type: String,
			default: "",
		},
		source:{
			type: String,
			default: "",
		},
		fbillId:{
			type: String,
			default: "",
		},
		goodsId:{
			type: String,
			default: "",
		},
		rangeType:{
			type: String,
			default: "",
		},
		dayDate:{
			type: String,
			default: "",
		},
		//弹窗组件数据
		content: {
			type: Array,
			// 默认测试数据
			// default: () => [{
			// 	timezh: "今天 (周三)",
			// 	timeformatter: "8-10",
			// 	id: 108,
			// 	timelist: [
			// 		{ timestr: "立即送达", },
			// 		{ timestr: "15:35", },
			// 		{ timestr: "16:05", },
			// 	],
			// },],
		},
		//弹窗 窗口高度
		barHidth: {
			type: Number,
			default: 400,
		},
		//点击模态框是否能关闭弹窗
		dodge: {
			type: Boolean,
			default: false,
		}

	});
	onLoad(()=>{
		isPhonex.value = getSystemPhoneX();
	})
	const emit = defineEmits(["dataCallback", "timeCallback","maskClose"])
	// 关闭窗口
	const close = () => {
		model.value = false;
	};

	// 打开窗口
	const open = () => {
		initTimes('open')

	};
	const initTimes = async (source:any='') => {
		let res :any=null;
		console.log(props.source,'creatDpkkk')
		if(props.source=='menuYd' || props.source=='addYd'){
			// 清除普通订单时间缓存
			!cartStore.curOrderType.type&&(cartStore.curOrderType.time.starTime||cartStore.curOrderType.time.endTime)
			 res= await getCheckDateList({ sellMemberId: shopStore.curSellerMemberId })
		}else if(props.source=='manyMeal'){
			 res= await getMealDateList({ fatherBillId:props.fbillId||'',goodsId:props.goodsId||'',rangeType:props.rangeType||'',orderDate:props.dayDate||''})
		}else{
			 res= await getDateList({ sellMemberId: shopStore.curSellerMemberId })
		}
	   
		if (!res.result||!res.object) {
			mApi.msg(res.shortMessage||'',res.code)
			cartStore.setCurOrderTimeString({})
			return
		}
		
		const months = {
			"01": "1月",
			"02": "2月",
			"03": "3月",
			"04": "4月",
			"05": "5月",
			"06": "6月",
			"07": "7月",
			"08": "8月",
			"09": "9月",
			"10": "10月",
			"11": "11月",
			"12": "12月",
		};
		const cachtime = cartStore.curOrderType.time
		if(cachtime.dateString||cachtime.starTime){
			
		}
		let dtIndex = -1,tmIndex=-1;
		dataList.value = res.object.map((obj,index) => {
			const year = obj.date.slice(0, 4);
			const month = obj.date.slice(4, 6);
			const day = obj.date.slice(6, 8);
			const timezh = `${months[month]}${parseInt(day, 10)}日`;
			const origTimes = obj.date;
			
			obj.date&&cachtime.dateString==obj.date?dtIndex=index:'';
			const timelist = obj.times.map((time,cindex) => {
				time.startTime&&cachtime.starTime==time.startTime?tmIndex=cindex:'';
				const hm = time.startTime?(time.startTime.split(':').join(''))+'00':'000000';
				return {
					timestr: `${time.startTime} - ${time.endTime}`,
					timehm:hm,
					deliveryfee: "",
					startTime: time.startTime,
					endTime: time.endTime
				}
			}
			
			);
			
			return { timezh, timelist, origTimes };
		});
		dtIndex>=0?isIndex.value=dtIndex:cartStore.setCurOrderDateString('');
		tmIndex>=0?Indexes.value=tmIndex:cartStore.setCurOrderTimeString({});
		dtIndex<0?isIndex.value = 0:'';
		
		if(props.source!='menuYd'&&source!='open'){
			const ditem = dataList.value[isIndex.value]||{};
			timeCallback(0,(ditem.timelist[0]||{}))
		}
		// const crtime = {},crdate = {};
		// if(props.isFrome=='creat'){
		// 	dataList.value[]
		// 	emit("dataCallback", crdate);
		// 	emit("timeCallback", crtime);
		// }
		
		// curOrderType: {
		// 	time: {
		// 		dateString: '',
		// 		starTime: '',
		// 		endTime: ''
		// 	},
		// 	type: ''
		// }
		
		source=='open'?model.value = true:'';
		console.log('dataList.value',dataList.value)
	};
	// 点击模态框关闭窗口
	const Modal = () => {
		if (props.dodge) {
			close();
			emit("maskClose")
		}
	};

	//时间切换回顶
	const gotop = () => {
		scrollTop.value = 1;
		nextTick(() => {
			scrollTop.value = 0;
		})

	};

	//切换日期
	const dataCallback = (index:number, item:any) => {
		isIndex.value = index;
		Days.value = dataList.value[index].timelist;
		Indexes.value = null;
		gotop();
		cartStore.setCurOrderDateString(item.origTimes)
		emit("dataCallback", item);
	};

	//选择时间
	const timeCallback = (index:number, item:any) => {
		Indexes.value = index;
		// this.modalName = null;
		const ditem = dataList.value[isIndex.value]||{};
		const textstr = (props.source=='menuYd' || props.source=='addYd'||props.source=='manyMeal'?(ditem.timezh||''):'今天') + ' ' + (item.timestr||'');
		const fullTime = (ditem.origTimes||'') + item.timehm;
		let param = {fast:props.source!='menuYd'&&isIndex.value==0&&index==0?true:false,startTime:item.startTime,endTime:item.endTime,timezh:ditem.timezh,timestr:item.timestr,origTimes:ditem.origTimes||'',textstr:textstr,fullTime:fullTime};
		cartStore.setCurOrderDateString(ditem.origTimes||'');
		cartStore.setCurOrderTimeString(JSON.parse(JSON.stringify(param)));
		console.log('timeCallback1111',param);
		emit("timeCallback", param);
	};
	defineExpose({ open, close,initTimes,dataList })
</script>

<style scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		animation: getInto 0.5s 1;
		opacity: 0.5;
		z-index: 999;
	}

	@keyframes getInto {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 0.5;
		}
	}

	.erk-text {
		color: #333;
		font-size: 32rpx;
		/* font-weight: 700; */
		margin-right: 10rpx;
	}

	.save {
		color: #999;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.erk-textTime {
		color: #666;
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.merrig {
		margin-left: 10rpx;
	}

	.active {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 400rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		overflow: hidden;
		transform: translateY(100%);
		transition: 0.4s;
	}

	.posi-check {
		position: absolute;
		right: 20rpx;
	}

	.add {
		transform: translateY(0);
	}

	.title {
		position: relative;
		background-color: #fff;
		padding: 30rpx 20rpx;
		color: #333;
		font-size: 40rpx;
		font-weight: 700;
		display: flex;
		justify-content: space-between;
	}

	/* .title > text {
  position: absolute;
  right: 14rpx;
  width: 46rpx;
  height: 46rpx;
  line-height: 38rpx;
  background-color: #ccc;
  color: #fff;
  border-radius: 50%;
} */

	.cont {
		display: flex;
		background-color: #fff;
		overflow-y: scroll;
	}

	.day {
		flex: 2;
		background-color: #f8f8f8;
		/* border-right: 2rpx solid #f8f8f8; */
		text-align: center;
		/* border-bottom: 20px solid #fff; */
	}

	.day view {
		padding: 0 12rpx;
		height: 110rpx;
		font-size: 32rpx;
		box-sizing: border-box;
		align-items: center;
		display: flex;
		justify-content: center;
		color: rgba(0, 0, 0, 0.50);
	}

	/* .day view:nth-child(1) {
		background-color: #fff;
		border-bottom: 2rpx solid #f8f8f8;
	} */

	.content {
		flex: 4;
		font-size: 28rpx;
		border-bottom: 40rpx solid #fff;
		background-color: #fff;
		position: relative;
	}

	.appoint {
		text-align: left;
		padding: 0 30rpx;
		height: 110rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		border-bottom: 2rpx solid #f8f8f8;
	}


	/* .active_copy {
  position: relative;
  background-color: #d7f7e3;
  color: #27c866;
  box-sizing: border-box;
} */
	.active_copy {
		color: #53A87F !important;
		background-color: #fff;
		border-bottom: 2rpx solid #f8f8f8;
    font-weight: 700;
	}

	/* .active_copy::after {
  content: "";
  width: 7rpx;
  height: 94rpx;
  background: #53A87F;
  position: absolute;
  top: 0;
  right: 0;
} */

	.longActive {
		position: relative;
		color: #53A87F !important;
    font-weight: 700 !important;
	}

	/* .cuIcon-check {
  position: absolute;
  width: 30rpx;
  right: 20rpx;
  height: 16rpx;
  border-bottom: 4rpx solid #27c866;
  border-left: 4rpx solid #27c866;
  transform: rotate(-45deg);
} */

	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
</style>